<!--
 * @Author: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @Date: 2022-10-12 07:57:56
 * @LastEditors: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @LastEditTime: 2022-10-15 09:56:36
 * @FilePath: \vue-event\src\views\user\userAvatar.VUE
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>

      <el-card class="card">
        <div slot="header">
          <span>更换头像</span>
        </div>
        <div>
          <!-- 图片，用来展示用户选择的头像 -->
          <img v-if="!avatar" class="the_img" src="../../assets/images/avatar.jpg" alt="" />
          <img v-else class="the_img" :src="avatar" alt="" />

          <!-- 按钮区域 -->
          <div class="btn-box">
          <!-- 文件选择框，默认被隐藏 -->
            <input type="file" accept="image/*" style="display: none" ref="iptRef" @change="onFileChange" />
            <el-button class="btn1" type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button>
            <el-button class="btn2" type="success" icon="el-icon-upload" @click="upload" :disabled="avatar === ''">上传头像</el-button>
          </div>
        </div>
      </el-card>

</template>

<script>
import { updateAvatarAPI } from '@/api'
export default {
  name: 'UserAvatar',
  data () {
    return {
      avatar: '' // 保存图片连接/base64字符串
    }
  },
  methods: {
    // 选择图片
    chooseImg () {
    // 目的：为了让input[type=file]标签，用js代码触发点击事件（导致它默认行为给一个文件选择窗口）
    // 原因：input[type=file]标签是原生的，样式不好改
    // 解决：移花接木，拿到标签模拟行为
      this.$refs.iptRef.click()
    },
    // 选择图片确定了
    onFileChange (e) { // e 园事件对象
      const files = e.target.files // 拿到用户选择的文件数组
      if (files.length === 0) {
        // 证明选择窗口打开了，但是没有选择
      } else {
        // 证明选择了文件（默认只选1个），如果需要多选则要给input标签添加额外属性
        console.log(files[0])

        // 功能：让选择的图片预览
        // img标签的src值：
        // 1.要么是图片的链接地址（外链http://开头，图片文件相对路径）
        // 2.或者是base64字符串

        // 解决方法1:文件-> 内存地址(这个地址只能在js内存里,不能发给后台)
        // 语法:URL.createObjURL()
        // 返回值:内存临时地址
        // this.avater = URL.createObjectURL(files[0])

        // 解决方法2：使用FileReader来读取选择的前端文件, 转换为base64字符串, 给img标签渲染

        const fr = new FileReader()
        // 调用 readAsDataURL 函数，读取文件内容
        fr.readAsDataURL(files[0])
        // 监听 fr 的 onload 事件
        fr.onload = (e) => {
        // 通过 e.target.result 获取到读取的结果，值是字符串（base64 格式的字符串）
          this.avatar = e.target.result
        }
      }
    },
    async upload () {
      const { data: res } = await updateAvatarAPI(this.avatar)
      if (res.code !== 0) {
        this.$message.error(res.message)
      } else {
        this.$message.success(res.message)
        // 更新vuex（让获取用户信息的actions再请求一次）
        this.$store.dispatch('getUserInfoActions')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.btn-box {
  margin-left: 60px;
  // margin-top: 10px;
}

.the_img{
    width: 360px;
    height: 350px;
}
.card{
  width: 400px;
}

</style>
